<template>
  <view class="container">
    <!--  标题栏  -->
    <view class="back-layout hor-layout">
      <view class="back-view" @click="navBack">
        <i class="iconfont back-icon">&#xe8de;</i>
      </view>
      <view class="back-title">回访记录</view>
      <view class="back-view" @click="addCallBackRecord">
        <i class="iconfont back-icon" style="font-size: 25px">&#xe622;</i>
      </view>
    </view>
    <view class="page-container ver-layout">
      <!--  学生信息   -->
      <view class="intent-student-info hor-layout-side-center">
        <view class="name">{{ backStudent.realname }}</view>
        <!--        <view class="edit-view">-->
        <!--          <i class="iconfont edit-icon">&#xe645;</i>-->
        <!--          <span>编辑</span>-->
        <!--        </view>-->
      </view>
      <view v-for="(item,index) in intentList" :key="item.label" class="intent-student-item hor-layout"
            :class="{'bottom-line':index===intentList.length-1}">
        <view class="intent-student-key single-line">{{ item.label }}</view>
        <view class="intent-student-value">{{ item.value }}</view>
      </view>
      <!--   回访记录列表   -->
      <block v-if="backStudentRecords.length>0">
        <view v-for="(item,index) in backStudentRecords" :key="index" class="student-item hor-layout"
              :class="{'first':index===0}">
          <view class="back-time">{{ item.created_at }}</view>
          <view class="student-divider ver-layout-center">
            <view class="divider-top-line" :class="{'disabled':index==0}"></view>
            <view class="divider-point"></view>
            <view class="divider-bottom-line" :class="{'disabled':index===backStudentRecords.length-1}"></view>
          </view>
          <view class="back-info ver-layout">
            <view class="back-info-title hor-layout-side-center">
              <view class="back-name">顾问:{{ backStudent.consultant.name }}</view>
              <view class="back-state">{{ getBackStyle(item) }}</view>
            </view>
            <!--            <view class="back-info-state hor-layout-side-center">-->
            <!--              <view class="">{{ getBackStyle(item) }}</view>-->
            <!--            </view>-->
            <view class="back-info-content">{{ item.content }}</view>
          </view>
        </view>
      </block>
      <view v-else class="list-no-data">暂无数据</view>
    </view>
  </view>
</template>

<script>
import {addCallBackRecord} from "@/router.js"
import {IntentStudentApi} from "@/api/intentStudent.js"

let engine = new IntentStudentApi()
export default {
  name: "callBackRecord",
  data() {
    return {
      studentObj: {},
      backStudent: {},
      backStudentRecords: [],
      intentMap: {
        sex: '性别',
        birthday: '出生日期',
        phone: '联系电话',
        course: '意向课程',
        intentionLevel: '意 向 度',
        home_address: '家庭住址',
        status: '状态'
      },
      intentLevelMap: {1: '一般', 2: '中等', 3: '强烈'},
      statusChecked: false
    }
  },
  computed: {
    intentList() {
      let intentMap = this.intentMap, sKeyList = Object.keys(intentMap), intentObj = this.backStudent
      sKeyList = sKeyList.map(key => {
        return {label: intentMap[key], value: intentObj[key]}
      })
      return sKeyList
    }
  },
  onLoad(options) {
    this.studentObj = options
    this.getStudentDetail()
  },
  methods: {
    navBack() {
      this.$u.route({type: 'back'})
    },
    addCallBackRecord() {
      this.$u.route({url: addCallBackRecord, params: this.studentObj})
    },
    getStudentDetail() {
      engine.getIntentStudentDetail(this.studentObj.id).then(res => {
        this.backStudent = res.data
        this.backStudent.course = res.data.courses.title
        this.backStudent.intentionLevel = this.intentLevelMap[res.data.intention_level]
        this.backStudentRecords = this.backStudent.tracerecord
        this.backStudentRecords.forEach(rec => {
          rec.created_at =rec.created_at.split(' ')[0]
        })
      })
    },
    getBackStyle(item) {
      //跟进记录【1-电话跟进；2-实地跟进；3-对方来访；4-线上跟进】
      let typeMap = {1: '电话跟进', 2: '实地跟进', 3: '对方来访', 4: '线上跟进'}
      return typeMap[item.type]
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}

.back-layout {
  position: fixed;
  width: 100%;
  z-index: 1000;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 44px);
  line-height: 44px;
  font-size: 16px;
  background: #42B4AC;
}

.back-view {
  width: 44px;
  padding-left: 9px;
  padding-right: 9px;
}

.back-icon {
  color: white;
  font-size: 22px;
}

.back-title {
  flex: 1;
  color: white;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.intent-student-info {
  padding: 0px 12px;
  width: 100%;
  height: 50px;
}

.intent-student-info > .name {
  font-size: 16px;
  font-weight: bold;
  color: #101010;
}

.edit-view {
  padding: 4px 8px;
  background: #F3AC3F;
  border-radius: 3px;
}

.edit-view > * {
  font-size: 12px;
  color: #FFFFFF;
}

.edit-icon {
  font-size: 10px;
  margin-right: 6px;
}

.intent-student-item {
  padding: 0px 12px;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #999999;
}

.intent-student-item.bottom-line {
  border-bottom: 1px solid #E4E4E4;
}

.intent-student-key {
  width: 50px;
  text-align: justify;
  text-align-last: justify;
  display: inline-block;
  font-size: 12px;
  color: #999999;
}

.intent-student-value {
  margin-left: 20px;
  font-size: 12px;
  color: #999999;
}

.student-item {
  padding: 0px 12px;
}

.student-item.first {
  margin-top: 20px;
}

.back-time {
  margin-top: 9px;
  font-size: 12px;
  color: #999999;
}

.student-divider {
  margin-left: 7px;
  margin-right: 14px;
}

.divider-top-line {
  height: 13px;
  width: 1px;
  background: #42B4AB;;
}

.divider-top-line.disabled {
  visibility: hidden;
}

.divider-point {
  width: 7px;
  height: 7px;
  background: #42B4AB;
  border-radius: 50%;
}

.divider-bottom-line {
  flex: 1;
  width: 1px;
  background: #42B4AB;;
}

.divider-bottom-line.disabled {
  visibility: hidden;
}

.back-info {
  flex: 1;
  margin-bottom: 18px;
  padding-left: 11px;
  padding-right: 22px;
  padding-bottom: 15px;
  background: #DAF8F5;
  border-radius: 6px;
}

.back-info-title {
  height: 35px;
  border-bottom: 1px solid #E4E4E4;
}

.back-info-title > * {
  font-size: 14px;
  color: #333333;
}

.back-state.backing {
  color: #55B741
}

.back-state.complete {
  color: #6CAEEF
}

.back-info-state {
  margin-top: 13px;
}

.back-info-state > * {
  font-size: 12px;
  color: #333333;
}

.back-info-content {
  margin-top: 11px;
  font-size: 12px;
  color: #999999;
}
</style>
